{% site "test" %}
{% filter csscomp:"scss" %}
/* Colors */
$blue: #4285f4;
$gray: #7d7d7d;
$teal: #00b8d3;
$darkteal: #0096a6;

/* Mixins */
@mixin box-shadow($shadow) {
  -moz-box-shadow: $shadow;
  -webkit-box-shadow: $shadow;
  box-shadow: $shadow;
}

@mixin vertical-align {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

/* Media Queries */
/* Mobile screens */
@media only screen and (max-width: 767px) {

  .caption-container {
    margin-top: 560px;
  }

  #carousel,
  #slideshow,
  .slide {
    height: 560px;
  }

  #carousel-inner {
    .col-4 {
      margin: 10px 0 0 !important;
      padding: 10px 50px !important;
      text-align: center;
    }
    padding: 0 10px !important;
  }

  #slideshow {
    background: url('../img/hero_01_mobile.jpg') no-repeat center center;
  }

  #carrot {
    border-left: 18px solid transparent !important;
    border-right: 18px solid transparent !important;
    border-bottom: 20px solid $teal !important;
    left: 0 !important;
    margin: auto;
    margin-bottom: -20px !important;
    right: 0 !important;
    top: -20px !important;
  }

  #controls {
    bottom: -560px;
  }

}

/* Non-mobile screens (tablets and desktop) */
@media only screen and (min-width: 768px) {

  .caption-container {
    margin-top: 500px;
  }

  #carousel,
  #slideshow,
  .slide {
    height: 500px;
  }

  #carousel-inner {
    .col-4 {
      text-align: left;
    }
  }

  #slideshow {
    background: url('../img/hero_01_desktop.jpg') no-repeat center center;
  }

  #controls {
    bottom: -500px;
  }

}

/* Tablet Screens */
@media only screen and (min-width: 768px) and (max-width: 1119px) {
}

/* Desktop screens */
@media only screen and (min-width: 1120px) {

  .caption-container {
    p {
      font: 20px/26px 'Roboto', arial, sans-serif !important;
      width: 100% !important;
    }
  }

}

#carousel {
  box-sizing: border-box;
  margin: 0 auto 24px;
  position: relative;
  width: 100%;
}

#carousel-inner {
  box-sizing: border-box;
  .col-4 {
    margin: 30px 0 0 0;
    z-index: 1;
  }
  margin: 0 auto;
  max-width: 1020px;
  padding: 0 32px;
  width: 100%;
}

#slideshow {
  position: absolute;
  width: 100%;
  z-index: -1;
}

.slide {
  left: 0;
  margin: auto;
  max-width: 1366px;
  opacity: 0;
  position: absolute;
  right: 0;
  width: 100%;
}

#controls {
  bottom: 0;
  box-sizing: border-box;
  display: inline;
  left: 0;
  margin: 0 auto;
  max-width: 1060px;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

#button-left,
#button-right {
  cursor: pointer;
  height: 100%;
  width: 40px;
}

#button-left {
  background: url('../img/slide_control_mobile_left.png') no-repeat center center;
  display: none;
  float: left;
}

#button-right {
  background: url('../img/slide_control_mobile_right.png') no-repeat center center;
  float: right;
}

.caption-container {
  @include box-shadow(0 0 6px 2px rgba(0,0,0,.23));
  background: $teal;
  box-sizing: border-box;
  display: block;
  position: relative;
  text-align: center;
  width: 100%;
  p {
    box-sizing: border-box;
    color: #fff;
    font: 16px/18px 'Roboto', arial, sans-serif;
    margin: 0 auto;
    opacity: 1;
    width: 95%;
  }
}

#carrot {
  border-bottom: 30px solid $teal;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  height: 0;
  left: 72%;
  margin-bottom: -30px;
  position: relative;
  top: -30px;
  width: 0;
}

#caption-2,
#caption-3 {
  display: none;
}

#caption-text {
  margin: 0 auto;
  max-width: 1020px;
  padding: 20px 24px;
}

/* Slide animations */
#slide-1.animate,
#slide-2.animate,
#slide-3.animate {
  -webkit-animation: slide 7s 1 ease-in-out forwards;
  animation: slide 7s 1 ease-in-out forwards;
}

@keyframes slide {
  0% {opacity: 0;}
  3%,
  100% {opacity: 1;}
}

@-webkit-keyframes slide {
  0% {opacity: 0;}
  3%,
  100% {opacity: 1;}
}

/* Caption animation */
#caption-1.animate,
#caption-2.animate,
#caption-3.animate {
  animation: slide 7s 1 ease-in-out forwards;
  -webkit-animation: slide 7s 1 ease-in-out forwards;
}

{% endfilter %}